<template>
  <div class="h-full flex flex-col space-y-6 overflow-y-auto">
    <!-- Header -->
    <div class="flex-shrink-0">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">接口文档</h1>
      <p class="text-gray-600 dark:text-gray-400 mt-1">
        X-Synergy OS API 开发文档
      </p>
    </div>

    <!-- Documentation sections -->
    <div class="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-8 min-h-0">
      <!-- Documentation navigation -->
      <div class="lg:col-span-1">
        <nav class="space-y-1 sticky top-0">
          <button
            v-for="section in sections"
            :key="section.id"
            @click="activeSection = section.id"
            :class="[
              'w-full flex items-center px-3 py-2 text-sm font-medium rounded-lg text-left transition-all duration-200',
              {
                'bg-primary-100 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300': activeSection === section.id,
                'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-dark-800 hover:text-gray-900 dark:hover:text-gray-100': activeSection !== section.id
              }
            ]"
          >
            <Icon :icon="section.icon" class="w-5 h-5 mr-3" />
            {{ section.name }}
          </button>
        </nav>
      </div>

      <!-- Documentation content -->
      <div class="lg:col-span-3 overflow-y-auto">
        <!-- Dynamic Menu API -->
        <div v-if="activeSection === 'dynamic-menu'" class="prose prose-gray dark:prose-invert max-w-none">
          <DynamicMenuApiDoc />
        </div>

        <!-- 认证系统 -->
        <div v-if="activeSection === 'auth'" class="prose prose-gray dark:prose-invert max-w-none">
          <AuthDoc />
        </div>

        <!-- 权限系统 -->
        <div v-if="activeSection === 'permissions'" class="prose prose-gray dark:prose-invert max-w-none">
          <PermissionsDoc />
        </div>

        <!-- AI 助手 -->
        <div v-if="activeSection === 'ai'" class="prose prose-gray dark:prose-invert max-w-none">
          <AiDoc />
        </div>

        <!-- 表格配置 -->
        <div v-if="activeSection === 'table-config'" class="prose prose-gray dark:prose-invert max-w-none">
          <TableConfigDoc />
        </div>
        
        <!-- 其他文档内容可以在这里添加 -->
        <div v-else-if="activeSection === 'getting-started'" class="card">
          <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
              快速开始
            </h2>
            <div class="space-y-4 text-gray-700 dark:text-gray-300">
              <p>欢迎使用 X-Synergy OS API 文档。这里包含了系统所有可用的 API 接口说明。</p>
              
              <h3 class="text-md font-medium text-gray-900 dark:text-gray-100 mt-6 mb-3">基础信息</h3>
              <ul class="list-disc list-inside space-y-2">
                <li><strong>API 基础地址:</strong> <code class="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded">http://localhost:5420/api</code></li>
                <li><strong>认证方式:</strong> Bearer Token (JWT)</li>
                <li><strong>数据格式:</strong> JSON</li>
                <li><strong>字符编码:</strong> UTF-8</li>
              </ul>

              <h3 class="text-md font-medium text-gray-900 dark:text-gray-100 mt-6 mb-3">请求示例</h3>
              <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto"><code>curl -X GET "http://localhost:5420/api/dynamic-menu/" \
  -H "Authorization: Bearer your_token_here" \
  -H "Content-Type: application/json"</code></pre>
            </div>
          </div>
        </div>

        <div v-else-if="activeSection === 'authentication'" class="card">
          <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
              认证说明
            </h2>
            <div class="space-y-4 text-gray-700 dark:text-gray-300">
              <p>X-Synergy OS 使用 JWT (JSON Web Token) 进行身份认证。</p>
              
              <h3 class="text-md font-medium text-gray-900 dark:text-gray-100 mt-6 mb-3">获取 Token</h3>
              <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto"><code>POST /api/auth/login
{
  "username": "your_username",
  "password": "your_password"
}</code></pre>

              <h3 class="text-md font-medium text-gray-900 dark:text-gray-100 mt-6 mb-3">使用 Token</h3>
              <p>在请求头中添加 Authorization 字段：</p>
              <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto"><code>Authorization: Bearer your_jwt_token_here</code></pre>
            </div>
          </div>
        </div>

        <div v-else-if="activeSection === 'errors'" class="card">
          <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
              错误处理
            </h2>
            <div class="space-y-4 text-gray-700 dark:text-gray-300">
              <p>API 使用标准的 HTTP 状态码来表示请求的处理结果。</p>

              <h3 class="text-md font-medium text-gray-900 dark:text-gray-100 mt-6 mb-3">状态码说明</h3>

              <div class="overflow-x-auto">
                
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">

                  <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态码</th>
                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">含义</th>
                      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">说明</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">200</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">OK</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">请求成功</td>
                    </tr>
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">400</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Bad Request</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">请求参数错误</td>
                    </tr>
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">401</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Unauthorized</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">未认证或认证失败</td>
                    </tr>
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">403</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Forbidden</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">权限不足</td>
                    </tr>
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">404</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Not Found</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">资源不存在</td>
                    </tr>
                    <tr>
                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-red-600">500</td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Internal Server Error</td>
                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">服务器内部错误</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'
import DynamicMenuApiDoc from '../docs/dynamic-menu-api.md'
import AuthDoc from '../docs/auth.md'
import PermissionsDoc from '../docs/permissions.md'
import AiDoc from '../docs/ai.md'
import TableConfigDoc from '../docs/tableConfig.md'

// 文档分类
const sections = [
  {
    id: 'getting-started',
    name: '快速开始',
    icon: 'carbon:rocket'
  },
  {
    id: 'dynamic-menu',
    name: '动态菜单',
    icon: 'carbon:menu'
  },
  {
    id: 'auth',
    name: '认证系统',
    icon: 'carbon:security'
  },
  {
    id: 'permissions',
    name: '权限系统',
    icon: 'carbon:user-role'
  },
  {
    id: 'ai',
    name: 'AI 助手',
    icon: 'carbon:watson'
  },
  {
    id: 'table-config',
    name: '表格配置',
    icon: 'carbon:data-table'
  },
  {
    id: 'errors',
    name: '错误处理',
    icon: 'carbon:warning'
  }
]

const activeSection = ref('getting-started')
</script>

<style scoped>
.card {
  @apply bg-white dark:bg-dark-900 rounded-lg shadow-sm border border-gray-200 dark:border-dark-700;
}

/* Markdown 样式 */
:deep(.prose) {
  @apply text-gray-700 dark:text-gray-300;
}

:deep(.prose h1) {
  @apply text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-2;
}

:deep(.prose h2) {
  @apply text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-1 mt-8;
}

:deep(.prose h3) {
  @apply text-gray-900 dark:text-gray-100 mt-6;
}

:deep(.prose code) {
  @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm;
}

:deep(.prose pre) {
  @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto;
}

:deep(.prose pre code) {
  @apply bg-transparent p-0;
}

:deep(.prose table) {
  @apply border-collapse border border-gray-200 dark:border-gray-700;
}

:deep(.prose th) {
  @apply bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-4 py-2 text-left;
}

:deep(.prose td) {
  @apply border border-gray-200 dark:border-gray-700 px-4 py-2;
}

:deep(.prose blockquote) {
  @apply border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 pl-4 py-2 my-4;
}

:deep(.prose ul) {
  @apply list-disc list-inside;
}

:deep(.prose ol) {
  @apply list-decimal list-inside;
}
</style>
